<template>
  <app-form>
    <div class="flex h-screen">
      <div class="border-r border-gray-200 dark:border-gray-700 flex-none bg-white dark:bg-blackgray-4 h-screen" :directions="['right']">
        <c-scrollbar
          trigger="hover"
          direction="y"
        >
          <a-menu
            class="h-full w-48"
            :mode="mode"
            :defaultOpenKeys="openKeys"
            :defaultSelectedKeys="selectedKeys"
            @menuItemClick="onClickMenuItem"
            v-if="menuData&&menuData.length"
          >
            <template v-for="(menu,key) in menuData" :key="key">
              <a-menu-item-group :title="menu.name" >
                <api-menu :menu-data="menu.children"></api-menu>
              </a-menu-item-group>
            </template>
          </a-menu>
          <a-empty v-else></a-empty>
        </c-scrollbar>
      </div>
      <app-layout class="flex-grow w-10">
        <a-card class="m-4" :title="setTitles()">
          测试
        </a-card>
      </app-layout>
    </div>
  </app-form>
</template>
<script >
  const router = window.dux.router.router
  vueApp.component('api-menu',{
    props:{
      menuData:{
        type: Array, default: ()=> []
      }
    },
    template:`
    <div v-for="(menu,key) in menuData" :key="key">
      <a-sub-menu :key="menu.id" v-if="menu.children&&menu.children.length">
         <template #icon ><component :is="menu.icon" v-if="menu.icon" /></template>
         <template #title> @{{menu.name}}</template>
         <api-menu :menu-data="menu.children"></api-menu>
      </a-sub-menu>
      <a-menu-item :key="menu.id" v-else>
        <template #icon>
            <component :is="menu.icon" v-if="menu.icon&&menu.type!=2" />
            <span class="flex-col w-10 h-6 rounded inline-block" v-else-if="menu.icon&&menu.type==2" v-html="menu.icon"></span>
        </template>
        <span class="flex-col">@{{menu.name}}</span>
      </a-menu-item>
    </div>
    `,
  })
export default {
    data(){
      return {
        mode:"vertical",
        menuData:@json($menuData),
        openKeys:['{{$id}}'],
        selectedKeys:['{{$id}}'],
        uri: '{{$uri}}',
        id:'{{$id}}',
        routes:{},
        titles:{}
      }
    },
    created(){
      this.menuData.forEach(item=>{
        item.children.forEach(row=>{
          this.titles[row.id] = row.name
          row.children.forEach(route=>{
            this.titles[route.id] = route.name
            this.routes[route.id] = route.route;
          })
        })
      })
      this.inits();
    },
    mounted(){
      // this.inits();
      console.log("测试",this.routes)
      console.log("测试",this.titles)
    },
    methods:{
      inits(){
        this.selectedKeys = [this.id]
        this.menuData.forEach(item=>{
          item.children.forEach(row=>{
            let index = row.children.findIndex(child=>child.id===this.id)
            if(index!==-1){
              this.openKeys = [row.id,this.id]
            }
          })
        })
      },
      setTitles(){
        return this.openKeys.map(item=>{
          return this.titles[item]
        }).join("/")
      },
      onClickMenuItem(key){
        this.id = key;
        this.inits();
        const params = {id:key}
        router.routerPush(void 0, Object.fromEntries(Object.keys(params).filter(key => params[key] !== null).map(key => [key, params[key]])))
      }
    }
}
</script>

<style>
.arco-menu-inline-content .arco-menu-has-icon{
  line-height: 18px;
}
.arco-menu-inline-content .arco-menu-has-icon .arco-menu-icon{
  line-height: 18px;
  justify-content: center;
  align-items: center;
  display: flex;
}
.arco-menu-inline-content .arco-menu-has-icon .arco-menu-title{
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
</style>
